<template>
  <div class="app-container">
    <div class="tab-bar">
      <div
        class="tab-item"
        :class="current === it.id ? 'tab-item-ac' : ''"
        v-for="(it, idx) in tabList"
        :key="idx"
        @click="handleTabClick(it.id)"
      >
        {{ it.name }}
      </div>
    </div>

    <div class="form-main">
      <el-card style="height: 100%">
        <custom-tag v-if="current === 0"></custom-tag>
        <intention-tag v-if="current === 1"></intention-tag>
        <call-tag v-if="current === 2"></call-tag>
        <follow-tag v-if="current === 3"></follow-tag>
      </el-card>
    </div>
  </div>
</template>
<script>
import { configTabList } from "../options";
import callTag from "./components/callTag.vue";
import followTag from "./components/followTag.vue";
import intentionTag from "./components/intentionTag.vue";
import customTag from "./components/customTag.vue";
export default {
  components: {
    callTag,
    followTag,
    intentionTag,
    customTag
  },
  data() {
    return {
      current: 0,
      tabList: configTabList
    };
  },
  methods: {
    handleTabClick(id) {
      this.current = id;
    }
  }
};
</script>

<style scoped lang="scss">
.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  position: relative;
}
.tab-bar {
  position: absolute;
  left: 10px;
  top: 0px;
  width: calc(100% - 20px);
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  display: flex;
  .tab-item {
    height: 100%;
    width: 100px;
    text-align: center;
    font-size: 14px;
  }
  .tab-item-ac {
    background-color: rgba(64, 158, 255, 0.1);
    color: #409eff;
    border-top: 2px solid #409eff;
  }
}

.form-main {
  margin-top: 50px;
  height: calc(
    100% - 80px
  ); /* 将高度设置为父级容器高度减去上方固定元素的高度 */
  overflow-y: auto;
  // overflow: scroll;
}
</style>
